<template>
    <div class="makerList">
        <div class="makerList_top">
			<div class="into_index">首页<i class="el-icon-close"></i></div>
			<div class="current">我的佣金<i class="el-icon-close"></i></div>
		</div>
        <div class="makerList_bottom">
            <div class="new">
                <div class="shopList">
                    <h3>佣金账户</h3>
                    <div class="shopList_serch">
                        <div class="iconfont icon">&#xe640;</div>
                        <div class="priceNum"><span>{{balanceInfo.commission_amount}}元</span><p>可提现佣金</p></div>
                    </div>
                </div>
            </div>
            
            <div class="makerList_table">
                <div class="makerList_bottom_table">
                    <h3>佣金提现</h3>
					<div class="Withdrawal">
                        <span>提现金额</span>
                        <div class="priceInfo">
                            <input type="" @input="outPrice" v-model="amountValue" placeholder="请输入提现金额">
                            <!-- <p>手续费：0.05元</p> -->
                            <p>
                                可提现佣金 {{balanceInfo.commission_amount}} 元
                                <span @click="toOutAll">全部提现</span>
                            </p>
                        </div>
                    </div>
                    <div class="Withdrawal">
                        <span>到账银行卡</span>
                        <div class="priceInfo">
                            <el-select style="width:400px" v-model="bankValue" placeholder="请选择">
                                <el-option
                                v-for="item in options"
                                :key="item.id"
                                :label="item.bank_name"
                                :value="item.id">
                                </el-option>
                            </el-select>
                        </div>
                    </div>
				</div>
                <div class="btn">
                    <el-button type="primary" @click="toRecords">提现</el-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return{
            tableList:[{}],
            input:'',
			checkAll:false,
			page:1,
			pageSize:10,
			total:0,
            checkBoxAll:[],				// 选中的数据
			shelvesAlls:[],
            balanceInfo:{},  //佣金信息
            income:20000,
            commission:5000,
            options: [],
            bankValue:null,
            amountValue:null,  //提现金额
            bindCardList:[], //已绑定银行卡列表
        }
    },
	mounted(){
        this.getBalance();
        // this.myChart();
        this.getBindCard()
	},
    methods: {
        
        // 获取余额信息
        getBalance(){
            this.$api.balanceInfo({level:1}).then(res=>{
                console.log(res,'余额信息');
                if(res.code==1){
                    this.balanceInfo = res.data?res.data:{}
                }
            })
        },

        // 提现按钮
        toRecords(){
            if(!this.amountValue){
                this.$message.warning('请输入提现金额')
                return
            }
            if(!this.bankValue){
                this.$message.warning('请选择提现银行卡')
                return
            }
            let params = {
                amount:this.amountValue,
                card_id:this.bankValue,
                level:1
            }
            this.$http.post('/api/admin/Wallet/CashOut',params).then(res=>{
                console.log(res,'提现结果');
                if(res.code==1){
                   this.$message.success('已提交提现申请')
                   this.amountValue = null
                   this.bankValue = null
                }else{
                    this.$message.warning(res.msg)
                }
            })
        },

        // 获取已绑定银行卡
        getBindCard(){
            let params = {
                level:1
            }
            this.$http.post('/api/admin/Bank/binded',params).then(res=>{
                console.log(res,'已绑定银行卡列表');
                if(res.code==1){
                    this.options = res.data.bank_list?res.data.bank_list:[]
                }
            })
        },

        // 提现金额输入验证
        outPrice(e){
            // console.log(e);
            // let amount = this.amountValue;
			// amount= /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/.test(amount) ? amount : amount.substring(0,amount.length-1)
			// setTimeout(() => {
			// 	this.amountValue = Number(amount);
			// }, 1);
            // //如果用户第一位输入的是小数点，则重置输入框内容
            if (this.amountValue != '' && this.amountValue.substr(0, 1) == '.') {
                this.amountValue = "";
            }
            this.amountValue = this.amountValue.replace(/^0*(0\.|[1-9])/, '$1');//粘贴不生效
            this.amountValue = this.amountValue.replace(/[^\d.]/g, "");  //清除“数字”和“.”以外的字符
            this.amountValue = this.amountValue.replace(/\.{2,}/g, "."); //只保留第一个. 清除多余的
            this.amountValue = this.amountValue.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
            this.amountValue = this.amountValue.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3');//只能输入两个小数
            if (this.amountValue.indexOf(".") < 0 && this.amountValue != "") {//以上已经过滤，若无小数点，首位不能为类似于 01、02的金额
                if (this.amountValue.substr(0, 1) == '0' && this.amountValue.length == 2) {
                this.amountValue = this.amountValue.substr(1, this.amountValue.length);
                }
            }
        },

        // 全部提现
        toOutAll(){
            this.amountValue = this.balanceInfo.commission_amount
        },


    },
}
</script>

<style lang="less" scoped>
    @import 'distriMoney.less';
    @import '@/assets/iconfont/iconfont.less';
</style>